.collaborative-left-page {
  box-sizing: border-box;
  font-family: 'YouSheBiaoTiHei', 'AzonixRegular', 'SourceHanSansSC', 'DINAlternate', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  .top-wrap{
    width: 100%;
    height: 686px;
    margin-bottom: 20px;
  }
  .content-wrap{
    height: calc(100% - 62px);
    width: calc(100% - 10px);
    background: linear-gradient( 180deg, rgba(20,25,31,0.6) 0%, rgba(60,66,73,0.6) 100%), linear-gradient( 178deg, rgba(9,11,13,0) 0%, #26394D 100%), radial-gradient( 185% 43% at 53% -3%, rgba(166,213,255,0.5) 0%, rgba(166,209,255,0) 24%, rgba(179,212,255,0) 100%);
    border: 1px solid rgba(77,89,102,0.25);
    border-radius: 4px;
    padding: 10px 15px 0;
    box-sizing: border-box;
    .data-area{
      height: 230px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      .item-wrap{
        height: calc(100% / 2);
        width: 33%;
        color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0 10px;
        .item-title{
          font-family: 'SourceHanSansSC';
          font-size: 14px;
          margin-bottom: 10px;
        }
        .item-icon{
          width: 64px;
          height: 64px;
          background-size: cover;
          margin-bottom: -8px;
          position: relative;
          .value{
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 22px;
            font-family: 'DINAlternate';
            font-weight: bold;
            background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 3%, #81C6FF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
          }
        }
      }
    }
  }
  .bottom-line{
    border: 2px solid;
    border-image: linear-gradient(225deg, rgba(117, 170, 202, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(117, 170, 202, 0)) 2 2;
  }
  @media screen and (max-width: 1920px) {
    transform: scale(0.4862); // 1920/3952 ≈ 0.4862
    transform-origin: top left;
  }
  @media screen and (max-width: 1080px) {
    transform: scale(0.2733); // 1080/3952 ≈ 0.2733
    transform-origin: top left;
  }

  @media screen and (min-width: 5120px) {
    transform: scale(1.7778); // 5120/3952 ≈ 1.2955
    transform-origin: top left;
  }
}
